import React from 'react';
import {Icon, Input, Button, Checkbox} from 'antd';
import {inject} from 'mobx-react';
import {Form} from '../../components';
import {Tool} from '../../utils';

import './index.scss';

/**
 * 登录页面
 * @inject 用来将Store添加到组件的属性中。参数一为Store的名称。
 */
@inject('store')
class Login extends React.Component {
  //构造函数
  constructor(props) {
    super(props);

    this.user = Tool.getUser();
  }

  render() {
    return (
      <Form
        className="login"
        labelAlign="right" //标签对齐方式
        layout="horizontal" //表单布局
        labelCol={{span: 0, offset: 0}} //标签的栅格占比
        wrapperCol={{span: 24, offset: 0}} //文本的栅格占比
        onSubmit={this.handleSubmit}
      >
        <div className="head1">React</div>
        <div className="head2">React是最流行的页面框架之一</div>
        <div className="title">账密登录</div>
        <Form.Item
          formId="userId"
          formConfig={{
            initialValue: this.user.userId, //初始值
            valuePropName: 'value', //用来指定组件的属性名，默认为value
            rules: [{required: true, message: '请输入用户名!'}]
          }}
          formChild={
            <Input
              prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}} />}
              placeholder="用户名：admin 或 user"
            />
          }
        />
        <Form.Item
          formId="password"
          formConfig={{
            initialValue: this.user.password,
            rules: [{required: true, message: '请输入密码!'}]
          }}
          formChild={
            <Input
              prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}} />}
              type="password"
              placeholder="密码：gong"
            />
          }
        />
        <Form.Item
          formId="check"
          formConfig={{
            initialValue: this.user.check,
            valuePropName: 'checked'
          }}
          formChild={<Checkbox>自动登录</Checkbox>}
        >
          <span className="title2">忘记密码</span>
        </Form.Item>
        <Button className="submit" type="primary" htmlType="submit" block>
          登录
        </Button>
        <div>
          <span>其他登录方式</span>
          <Icon type="alipay-circle" style={{marginLeft: '10px', color: 'rgba(0,0,0,.25)'}} />
          <Icon type="taobao-circle" style={{marginLeft: '10px', color: 'rgba(0,0,0,.25)'}} />
          <Icon type="weibo-circle" style={{marginLeft: '10px', color: 'rgba(0,0,0,.25)'}} />
          <span className="title2">注册账户</span>
        </div>
        <div className="footer">Copyright 2020 烟火出品</div>
      </Form>
    );
  }

  /**
   * 提交表单
   */
  handleSubmit = (e) => {
    e.preventDefault();
    //校验表单，并滚动到错误位置
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        let {store} = this.props; //根Store
        store.login.loginIn(values, store); //登录
      }
    });
  };
}

/**
 * 使用Form.create()，从而在组件中使用this.props.form进行表单操作
 */
export default Form.create({})(Login);
